<template>
  <VirtualizedTable :data-source="dataSource" :columns="columns" :width="1200" :height="480">
    <template #headerCell="{ column, title }">
      <template v-if="column.field === 'key'">
        <span :style="{ color: '#0052d9' }">{{ title }}</span>
      </template>
    </template>
    <template #bodyCell="{ column, value, rowIndex }">
      <template v-if="column.field === 'key'">
        <span :style="{ color: rowIndex % 2 === 0 ? '#8e56dd' : '#e851b3' }">{{ value }}</span>
      </template>
    </template>
  </VirtualizedTable>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import VirtualizedTable from '@/components/virtualized'
import '@/components/virtualized/src/style/index.less'
import getData from '../data'

const dataSource = ref<any[]>([])
const columns = ref<any[]>([])

onMounted(() => {
  const res = getData(1000, 120, [0], [78])
  dataSource.value = res.dataSource
  columns.value = res.columns
})
</script>
